<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption">
			<view class="grid-d grid-cols-2 gap-2 padding-sm">
				<view class="cu-card no-card" v-for="(item,index) in list" :key="index">
					<view class="cu-item shadowl">
						<view class="image" @click="toGoods(item.id)">
							<image class="hbyw-45" :src="item.pic[0]" mode="aspectFill">
						</view>
						<view class="padding-sm">
							<view class="padding-bottom-sm">{{item.title}}</view>
							<view class="flex align-center">
								<view class="flex align-center flex-sub">
									<image class="cu-avatar round" :src="item.user.avatar" mode="aspectFill">
									</image>
									<view class="flex-sub padding-lr-xs">{{item.user.nickname}}</view>
								</view>
								<view class="flex-sub text-price text-red">
									{{item.price}}
								</view>
								<view @click="likeGoods(index)" :class="item.is_like ? 'text-red':'text-gray'"
									class="lg cuIcon-appreciatefill"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import GoodsApi from "@/api/goods";
	import GoodsLikeApi from "@/api/goods_like";
	export default {
		name: "GoodsList",
		mixins: [MescrollMixin],
		props: ['category_id', 'type', 'keyword'],
		data() {
			return {
				mescroll: null,
				upOption: {},
				downOption: {
					use: false
				},
				list: [],
			}
		},
		watch: {
			category_id() {
				this.mescroll.resetUpScroll();
			},
			type() {
				this.mescroll.resetUpScroll();
			},
			keyword() {
				this.mescroll.resetUpScroll();
			}
		},
		methods: {
			upCallback(page) {
				if (page.num == 1) {
					this.list = [];
				}
				GoodsApi.list({
					category_id: this.category_id,
					type: this.type,
					keyword: this.keyword,
					page: page.num,
					page_size: page.size
				}).then((res) => {
					this.list = this.list.concat(res.data);
					this.mescroll.endBySize(res.data.length, res.total);
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			likeGoods(index) {
				this.list[index].is_like = true
				this.list[index].like = this.list[index].like + 1
				GoodsLikeApi.add({
					goods_id: this.list[index].id
				}).then((res) => {

				})
			},
			toGoods(id) {
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + id
				});
			},
		}
	}
</script>

<style scoped>
	.hbyw-45 {
		height: 45vw;
	}
</style>
